<template>
  <div class="singer">
    <div class="result">找到 {{ singerCount }} 个歌单</div>
    <div class="item">
      <songItem
        v-for="(item, index) in searchSingerList"
        :key="index"
        :itemData="item"
        @handleClick="routerClick"
      ></songItem>
    </div>
    <div class="pagination" v-if="searchSingerList?.length > 0">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="singerCount"
        :page-size="30"
        :current-page="currentPage"
        @current-change="currentPageChange"
        hide-on-single-page
      >
      </el-pagination>
    </div>
    <el-backtop target=".singer"></el-backtop>
  </div>
</template>
<script>
import songItem from '@/views/Discover/disCoverChildren/components/songItem.vue'
import { getSearchSinger } from '@/api/search/search'
export default {
  data() {
    return {
      // 搜索歌单列表
      searchSingerList: [],
      // 搜索总条数
      singerCount: 0,
      // 页数
      currentPage: 1
    }
  },
  methods: {
    // 获取搜索专辑
    async getSearchSinger() {
      const res = await getSearchSinger({
        keywords: this.$route.query.name,
        offset: 30 * (this.currentPage - 1),
        type: 1000
      })
      // console.log(res)
      this.singerCount = res.data.result.playlistCount
      this.searchSingerList = res.data.result.playlists
      // console.log(this.searchSingerList)
    },
    // 跳转歌手信息
    routerClick(userId) {
      console.log(userId, '歌手id跳转歌手详情')
      this.$router.push({ path: '/index/musicDateil', query: { id: userId } })
    },
    currentPageChange(page) {
      this.currentPage = page
      this.searchSingerList = []
      this.getSearchSinger()
    }
  },
  components: {
    songItem
  },
  created() {
    this.getSearchSinger()
  }
}
</script>
<style lang="scss" scoped>
.singer {
  width: 1300px;
  margin: 0 auto;
  overflow-x: hidden;
  height: 74vh;
  // background-color: pink;
  .result {
    font-size: 20px;
  }
}
.singer::-webkit-scrollbar {
  display: none;
}
.item {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 70px;
  .songItem {
    padding: 10px;
    // flex: 17%;
    margin-top: 20px;
    margin-right: 10px;
    margin-bottom: 50px;
    cursor: pointer;
    width: 227px;
    height: 185px;
    &:nth-child(5) {
      margin-right: 0;
    }
  }
}
.pagination {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
